<template>
    <view class="container">
        <view class="topFixed">
            <view
                class="topNav d-cw d-ac d-jc"
                :style="{ paddingTop: topTitBox + 'px' }"
            >
                <view class="topNav-min d-cw d-ac d-jc">
                    <view
                        class="d-rn d-jb d-ac"
                        style="width: 94%; margin: 0 auto"
                    >
                        <view class="topNav-min-left">
                            <text>{{$t('hello')}}！{{ userName }}</text>
                        </view>
                        <view class="topNav-min-right d-rn d-ac">
                            <view class="topNav-min-right-picker">
                                <picker
                                    @change="bindPickerChange"
                                    :range="empAllList"
                                    range-key="employerName"
                                    class="picker"
                                >
                                    <view class="d-rn d-ac">
                                        <view class="picker-con d-cn d-jc">
                                            <view
                                                class="uni-input one-txt-cut"
                                                v-if="type.typeName"
                                                >{{ type.typeName }}
                                            </view>
                                            <view
                                                class="uni-input one-txt-cut"
                                                v-else
                                                >{{ $t('please_select') }}</view
                                            >
                                        </view>
                                        <image
                                            src="../../static/img/bottom.png"
                                            mode=""
                                        ></image>
                                    </view>
                                </picker>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="content">
            <view
                class="content-tab d-rn d-ac d-ja"
                v-if="userData.roleKey == 'system'"
            >
                <view
                    class="content-tab-one d-cw d-ac d-jc"
                    v-for="(item, index) in 2"
                    :key="index"
                    @click="handleNav(index)"
                >
                    <text :class="navSts == index ? 'active' : 'outactive'" v-if="index==0 ||(attendanceType==2 && index==1)">{{
                        !index ? $t('my_working_schedule') : $t('crew_scheduling')
                    }}</text>
                    <text v-if="navSts == index"></text>
                </view>
            </view>

            <view class="mains-all">
                <view class="mains-all-title">
                    <text>{{ $t('shifts') }}</text>
                </view>
                <scroll-view
                    scroll-x="true"
                    scroll-with-animation
                    :scroll-into-view="minSelCrt"
                    :enable-flex="true"
                    :show-scrollbar="false"
                    class="scrollview-box"
                >
                    <view class="mains-all-one">
                        <text
                            @click="handleGourl(item, index)"
                            :id="'minCla' + index"
                            v-for="(item, index) in banciList"
                            :key="index"
                            :class="tabNum == index ? 'actives' : 'outactives'"
                            >{{ item.shiftName }}</text
                        >
                    </view>
                </scroll-view>
            </view>
        </view>
        <view class="rili" style="height: 800rpx">
            <u-calendar
                ref="calendar"
                :dateLists="dateList"
                :maxDate="maxDate"
                :minDate="minDate"
                :nowMonth="nowMonth"
                @handleGetRiFather="handleGetRiFather"
                @handleGetMonth="handleGetMonth"
                @geyheights="geyheights"
                @changeYear="changeYear"
                :yearsNum="yearsNum"
            ></u-calendar>
        </view>
        <view class="big">
            <view
                class="clockIn-order-bto"
                v-for="(item, index) in dateClassList"
                :key="index"
            >
                <view class="">
                    <view class="clockIn-order-bto-title d-rn d-ac d-jb">
                        <text>{{ $t('clockIn_order_details') }}</text>
                        <text
                            >{{ item.publisher }} {{ $t('clockIn_order_publisher') }}
                            {{ item.createTime }}</text
                        >
                    </view>
                    <view class="clockIn-order-bto-one d-rn d-ac d-jb">
                        <text>{{ $t('clockIn_order_workTime') }}</text>
                        <text
                            >{{ item.workTimeStart }}--{{
                                item.workTimeEnd
                            }}</text
                        >
                        <!-- <view class=" d-rn d-ac" style="width: 23%;padding-right:30rpx;box-sizing: border-box;color: #999999;">
							<view class="d-rn d-ac d-je"  v-for="(item,index) in item.timeRange" :key="index">
								<text style="margin-right: 20rpx;color: #999999;">{{item}}</text>
							</view>
						</view> -->
                    </view>
                    <view class="clockIn-order-bto-one d-rn d-jb">
                        <text>{{ $t('clockIn_order_workPlace') }}</text>
                        <view class="addressed">
                            <template
                                v-if="
                                    item.clockingPlace &&
                                    item.clockingPlace.length
                                "
                            >
                                <view
                                    class=""
                                    v-for="(
                                        items, indexs
                                    ) in item.clockingPlace"
                                    :key="indexs"
                                >
                                    {{ items.address }}
                                </view>
                            </template>
                            <view class="">
                                {{ item.placeStart }}
                            </view>
                        </view>
                    </view>
                    <view class="clockIn-order-bto-one d-rn d-ac d-jb">
                        <text>{{ $t('clockIn_order_note') }}</text>
                        <text>{{ item.remark }}</text>
                    </view>
                </view>
            </view>
        </view>
        <u-picker
            :show="changeYearShow"
            :columns="columns"
            @cancel="changeYearShow = false"
            @confirm="changeYearConfirm"
            :defaultIndex="defaultIndex"
        ></u-picker>
    </view>
</template>

<script>
var _self;
import {
    classesList,
    scheduleGetMouth,
    getMySchedule,
    getAttendance,
    getEmployer,
		getAttendanceType,
} from '../../api/index.js';
import { getEmploymentList } from '@/api/mine.js';
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            fresh:true,
            empAllList: [],
            show: true,
            mode: 'range',
            phoneInfo: uni.getSystemInfoSync(),
            type: {
                typeName: '',
                typeId: '',
            },
            topTitBox: 0,
            navSts: 0,
            tabNum: 0,
            // 中部分类==选择
            minCla: 0,
            // 底部分类滑动描点
            minSelCrt: null,
            numList: [],
            listss: [
                {
                    month: '1',
                    date: [],
                },
            ],
            maxDate: '',
            minDate: '',
            dateLists: [],
            nowMonth: null,
            needMonth: null,
            riliHeight: 0,
            userName: uni.getStorageSync('userInfo').employeeName,
            userData: {},
            banciList: [],
            timeForm: {
                startTime: '',
                endTime: '',
                shiftId: '',
            },
            dateTimes: [],
            years: '',
            monthsA: '',
            monthsB: '',
            dateList: [],
            dateClassList: [],
            getNowDate: '',
            getYear: '',
            getMonths: '',
            selectDate: '',
            roleName: uni.getStorageSync('roleName'),
            yearsNum: '',
            changeYearShow: false,
            columns: [
                [
                    2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024,
                    2025, 2026, 2027, 2028, 2029, 2030, 2031, 2032, 2033, 2034,
                    2035, 2036, 2037, 2038, 2039, 2040, 2041, 2042, 2043, 2044,
                    2045,
                ],
            ],
            defaultIndex: [],
						attendanceType:'',
        };
    },
    computed: {
        ...mapGetters(['getEmployer']),
    },
    onReady() {
        // 如果需要兼容微信小程序的话，需要用此写法
        // this.$refs.calendar.setFormatter(this.formatter)
    },
    onLoad() {
        _self = this;
        _self.topTitBox = _self.phoneInfo.statusBarHeight;
        var today = new Date();
        var year = today.getFullYear();
        this.yearsNum = year;
        _self.years = year;
        this.defaultIndex = [this.columns[0].findIndex((v) => v == this.years)];
        _self.nowMonth = today.getMonth();
        _self.maxDate = year + '-12-31';
        _self.minDate = year + '-1-1';
        _self.getNowDate = today.getDate();
        _self.getYear = today.getFullYear();
        _self.getMonths = today.getMonth() + 1;
        if (_self.getMonths < 10) {
            _self.getMonths = '0' + _self.getMonths;
        }
        if (_self.getNowDate < 10) {
            _self.getNowDate = '0' + _self.getNowDate;
        }
        _self.selectDate =
            _self.getYear + '-' + _self.getMonths + '-' + _self.getNowDate;
    },
    onShow() {
        _self.getclassesList();
				this.getAttendanceType()
        this.userData = uni.getStorageSync('userInfo');
    },

    methods: {
			getAttendanceType(){
				getAttendanceType().then(res=>{
					this.attendanceType = res.msg;
				})
			},
        changeYearConfirm(e) {
            console.log('e', e);
            this.years = e.value[0];
            this.yearsNum = e.value[0];
            this.changeYearShow = false;
            this.yearMonthDay = `${this.yearsNum}-${
                this.nowMonth < 10 ? '0' + this.nowMonth : this.nowMonth
            }-${this.dayNum}`;
            _self.getclassesList();
			_self.getDate();

            this.userData = uni.getStorageSync('userInfo');
        },
        changeYear(flag) {
            this.changeYearShow = flag;
            console.log('点击了年份');
        },
        getgetEmployer() {
            getEmploymentList().then((res) => {
                if (res.code == 200) {
                    this.empAllList = res.data;
                    this.type.typeName = this.empAllList[0].employerName;
                    this.type.typeId = this.empAllList[0].id;
                    this.getscheduleList();
                }
            });
        },
        getDate() {
            // let months = new Date().getMonth()
            // let _self.monthsB = new Date().getMonth()+1
            let start = '';
            let end = '';
            start = this.$refs.calendar.months[_self.monthsA].date[0].day;
            end =
                this.$refs.calendar.months[_self.monthsA].date[
                    this.$refs.calendar.months[_self.monthsA].date.length - 1
                ].day;
            // console.log(this.$refs.calendar.months[months].date[0],this.$refs.calendar.months[months].date[this.$refs.calendar.months[months].date.length-1])

            if (start < 10) {
                start = '0' + start;
            }
            if (end < 10) {
                end = '0' + end;
            }

            this.timeForm.startTime =
                _self.years + '-' + _self.monthsB + '-' + start;
            this.timeForm.endTime =
                _self.years + '-' + _self.monthsB + '-' + end;
            _self.getgetEmployer();
        },
        // 获取我的更表
        getscheduleList() {
            this.$commonFun.sLoad();
            this.dateList = [];
            this.timeForm.employerId = this.type.typeId;
            getMySchedule(this.timeForm).then((res) => {
                if (res.data && res.data.length) {
                    this.dateList = res.data;
										console.log('  this.dateList',  this.dateList)
                    _self.handleGetDateClass();
                    if (this.dateList && this.dateList.length) {
                        this.dateList.forEach((item) => {
													// item.classesList = []
                            item.day = item.date.substring(8, 10);
                            item.month = item.date.substring(5, 7);
                            item.day = Number(item.day);
                            item.month = Number(item.month);
                        });
                    }
                    this.$forceUpdate();
                } else {
                    this.dateList = [];
                    this.$forceUpdate();
                }
                uni.hideLoading();
            });
        },
        // h获取班次
        getclassesList() {
            classesList().then((res) => {
                if (res.code == 200) {
									console.log('获取班次', res.data)
                    _self.banciList = res.data;
                    _self.banciList.unshift({
                        shiftName: '全部',
                        id: '',
                    });
                }
            });
        },
        geyheights(e) {
            console.log(e);
            _self.riliHeight = e;
        },
        handleGetMonth(e) {
            _self.needMonth = e + 1;
            _self.monthsA = e;
            _self.monthsB = e + 1;
            if (_self.monthsB < 10) {
                _self.monthsB = '0' + _self.monthsB;
            }
            setTimeout(function () {
                _self.getDate();
            }, 10);
        },
        bindPickerChange(e) {
            _self.type.typeName = _self.empAllList[e.detail.value].employerName;
            _self.type.typeId = _self.empAllList[e.detail.value].id;
        },
        handleNav(index) {
            // _self.navSts = index;
            if (index) {
                _self.$commonFun.goUrl(1, '../crewScheduling/index');
            }
        },
        handleGourl(val, index) {
            _self.tabNum = index;
            _self.timeForm.shiftId = val.id;
            // this.cate_id = val.id
            if (index > 0 && index < _self.numList.length) {
                _self.$nextTick(() => {
                    _self.minSelCrt = 'minCla' + (index - 2);
                });
            }
            _self.getscheduleList();
        },
        handleGetDateClass() {
            _self.dateClassList = [];
            this.dateList.forEach((item) => {
                if (item.date == _self.selectDate) {
                    _self.dateClassList = item.classesList;
                }
            });
            if (_self.dateClassList && _self.dateClassList.length) {
                _self.dateClassList.forEach((q) => {
                    q.clockingPlace = q.clockingPlace;
                });
            }
        },
        getgetAttendance() {
            _self.dateClassList = [];
            let find = this.dateList.find(
                (item) => item.date == _self.selectDate
            );
            _self.dateClassList = find.classesList;
            console.log(_self.dateClassList);
        },
        handleGetRiFather(e) {
            _self.selectDate = e[0];
            _self.handleGetDateClass();
            _self.getgetAttendance();
            this.$forceUpdate();
        },
    },
};
</script>

<style lang="scss" scoped>
page {
    background-color: #f5f5f5;
}

.container {
    width: 100%;

    .topFixed {
        width: 100%;
        position: fixed;
        z-index: 60;
        top: 0;
        left: 0;
    }

    // 导航栏
    .topNav {
        width: 100%;
        box-sizing: border-box;
        position: relative;
        height: 128rpx;
        background-color: #ffd03d;

        &-min {
            width: 100%;
            position: absolute;
            left: 0;

            &-left {
                text {
                    font-size: 36rpx;
                    font-weight: 500;
                    color: #17171a;
                }
            }

            &-right {
                &-picker {
                    width: 186rpx;
                    padding: 8rpx 24rpx;
                    box-sizing: border-box;
                    background-color: #ffe182;
                    border-radius: 2em;

                    .picker-con {
                        .uni-input {
                            max-width: 112rpx;
                            font-size: 28rpx;
                            color: #17171a;
                        }
                    }

                    image {
                        width: 18rpx;
                        height: 10rpx;
                        margin-left: 12rpx;
                    }
                }
            }
        }
    }

    .content {
        margin-top: 128rpx;
        background-color: #ffffff;

        &-tab {
            padding: 24rpx 0;
            box-sizing: border-box;
            position: relative;
            border-bottom: 1px solid #f5f5f5;

            text:nth-of-type(1) {
                font-size: 30rpx;
            }

            text:nth-of-type(2) {
                width: 138rpx;
                height: 4rpx;
                background-color: #fdb911;
                position: absolute;
                top: 93%;
            }

            .active {
                color: #333333;
                font-weight: 500;
            }

            .outactive {
                color: #999999;
            }
        }

        .mains {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            padding: 30rpx;
            box-sizing: border-box;
            border-bottom: 1px solid red;
            justify-content: space-between;
            margin-bottom: 30rpx;

            &-all {
                width: 80%;
                display: flex;
                flex-flow: row nowrap;
                align-items: center;
                font-size: 16px;
                text-align: center;
                white-space: nowrap;

                &-one {
                    width: 80%;
                    display: flex;
                    align-items: center;
                    flex-flow: row nowrap;
                    padding: 0 20rpx;
                    box-sizing: border-box;

                    text {
                        margin-right: 40rpx;
                        font-size: 26rpx;
                        color: #333333;
                    }

                    .actives {
                        color: red;
                    }
                }

                &-title {
                    padding: 22rpx 34rpx;
                    box-sizing: border-box;

                    text {
                        font-size: 28rpx;
                        color: #333333;
                    }
                }
            }
        }
    }

    .rili {
        // background-color: #ffffff;
        height: 400px;
    }

    .big {
        width: 94%;
        margin: 24rpx auto;
        position: relative;
        margin-top: 20px;
        .addressed {
            max-width: 70%;
            font-size: 26rpx;
            color: #999999;
        }

        .clockIn-order-bto {
            padding: 30rpx 24rpx;
            box-sizing: border-box;
            background-color: #ffffff;
            border-radius: 12rpx;
            margin-top: 24rpx;

            &-title {
                padding-bottom: 16rpx;
                box-sizing: border-box;
                border-bottom: 1px solid #eaeaea;

                text:nth-of-type(1) {
                    font-size: 26rpx;
                    color: #333333;
                    font-weight: bold;
                }

                text:nth-of-type(2) {
                    font-size: 26rpx;
                    color: #999999;
                }
            }

            &-one {
                margin-top: 20rpx;

                text:nth-of-type(1) {
                    font-size: 26rpx;
                    color: #333333;
                }

                text:nth-of-type(2) {
                    font-size: 26rpx;
                    color: #999999;
                }
            }
        }
    }
}
</style>
